@extends('layouts.admin')

@section('content')

    <h1 class="text-center text-danger">这要对文本样式进行编辑</h1>
    <style type="text/css">
        .toolbar {
            border: 1px solid #ccc;
        }

        .text {
            border: 1px solid #ccc;
            height: 1000px;
        }
    </style>
    <div id="bar" class="toolbar">
    </div>
    <div id="body" class="text"> <!--可使用 min-height 实现编辑区域自动增加高度-->
        {!! $article->body !!}

    </div>

    <br>
    <br>

    <div class="col-md-offset-3 col-md-6">
        <a id="submit" class="btn btn-block">保存</a>
    </div>
@endsection

@section('scripts')
    <script src="//cdn.bootcss.com/js-xss/0.3.3/xss.min.js"></script>
    <script src="//unpkg.com/wangeditor/release/wangEditor.min.js"></script>
    <script type="text/javascript">
        $("#editor img").removeProp('style').removeClass().removeAttr('style');
        var E = window.wangEditor
        var editor = new E('#bar', '#body')  // 两个参数也可以传入 elem 对象，class 选择器
        editor.customConfig.menus = [
            'head',  // 标题
            'bold',  // 粗体
            'italic',  // 斜体
            'underline',  // 下划线
            'strikeThrough',  // 删除线
            'foreColor',  // 文字颜色
            'backColor',  // 背景颜色
            'link',  // 插入链接
            'list',  // 列表
            'justify',  // 对齐方式
            'quote',  // 引用
            'emoticon',  // 表情
            //'image',  // 插入图片
            'code',  // 插入代码
            'undo',  // 撤销
            'redo'  // 重复
        ]
        editor.create()
        var html = editor.txt.html()

        document.querySelector('a.btn.btn-block').addEventListener('click', function () {
            var html = editor.txt.html()
            var filterHtml = filterXSS(html)  // 此处进行 xss 攻击过滤
            alert(filterHtml)
        }, false)
    </script>

@endsection
